<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/publish' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>平台管理员</el-breadcrumb-item>
      <el-breadcrumb-item>管理员</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索和新增管理员 -->
    <el-card>
      <div class="function-lan">
        <div class="search-for">
          <el-input
            class="search-for-ipt"
            clearable
            @clear="getManagerList"
            prefix-icon="el-icon-search"
            v-model="queryInfo.query"
            placeholder="请输入内容进行搜索"
          ></el-input>
          <!-- 搜索按钮 -->
          <div class="search-btn">
            <Buttons :text="text3"></Buttons>
          </div>
        </div>
        <div class="add-new-manager">
          <!-- 添加管理员按钮 -->
          <div class="add-manager-btn" @click="addManagerDialog">
            <Buttons :text="text1"></Buttons>
          </div>
        </div>
      </div>
    </el-card>
    <!-- 管理员列表 -->
    <el-card>
      <el-table :data="tables" border stripe>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="姓名" prop="username"></el-table-column>
        <el-table-column label="编号id" prop="id"></el-table-column>
        <el-table-column label="角色" prop="role_id">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.role_id === 1"
              >超级管理员</el-tag
            >
            <el-tag type="warning" v-else-if="scope.row.role_id === 2"
              >社区管理员</el-tag
            >
            <el-tag type="info" v-else-if="scope.row.role_id === 3"
              >社区自治管理员</el-tag
            >
            <el-tag type="danger" v-else-if="scope.row.role_id === 4"
              >街道管理员</el-tag
            >
            <el-tag v-else>普通管理员</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <!-- 作用域插槽接收作用域数据 -->
            <!-- 修改按钮 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="修改管理员信息"
              placement="bottom-end"
            >
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
              ></el-button>
              <!-- @click="showEditDialog(scope.row.id)" -->
            </el-tooltip>

            <!-- 删除按钮 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="删除管理员"
              placement="bottom"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="removeUserById(scope.row.id)"
              ></el-button>
            </el-tooltip>

            <!-- 添加权限 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="添加管理员权限"
              placement="bottom-start"
            >
              <el-button
                type="success"
                icon="el-icon-circle-plus-outline"
                size="mini"
                @click="addManagerById(scope.row.id)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
        <!-- layout是字符串用来展示页面上有什么功能组件 -->
      </el-pagination>
    </el-card>
    <!-- 添加管理员对话框 -->
    <el-dialog
      title="添加用户"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addDialogClosed"
    >
      <!-- :visible.sync属性绑定用来控制对话框的显示和隐藏 -->
      <!-- 内容主体区域 -->
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="70px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑管理员信息对话框 -->

    <!-- 添加管理员权限对话框 -->
    <el-dialog
      title="添加管理员权限"
      :visible.sync="addPowerDialogVisible"
      width="50%"
      @close="addPowerDialogClosed"
    >
      <!-- 修改权限 -->
      <el-form
        :model="addPowerForm"
        :rules="addPowerFormRules"
        ref="addPowerFormRef"
        label-width="70px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addPowerForm.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="id" prop="id">
          <el-input
            type="number"
            v-model.number="addPowerForm.id"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="role_id" prop="role_id">
          <el-input
            type="number"
            v-model.number="addPowerForm.role_id"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addPowerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addPower">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Buttons from "@/components/button/btn.vue";
// import { removeUserById } from "@/function/removeUserById/removeUserById.js";
import { isSuperManager } from "@/function/isSuperManager/isSuperManager.js";
export default {
  components: {
    Buttons,
  },
  data() {
    return {
      // 获取用户列表的参数对象
      queryInfo: {
        query: "",
        // 当前页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 2,
      },
      // 添加用户的表单数据
      addForm: {
        username: "",
        password: "",
      },
      // 添加管理员权限数据
      addPowerForm: [],
      addPowerDialogVisible: false,
      total: 0,
      text1: "添加管理员",
      text3: "搜索",
      managerList: [],

      // 添加表单验证规则对象
      addFormRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            messasge: "用户名长度在3~10个字符之间",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            messasge: "密码长度在8~15个字符之间,且必须使用数字和字母",
            trigger: "blur",
          },
        ],
      },
      // 修改管理员权限验证对象
      addPowerFormRules: {
        role_id: [
          {
            required: true,
            message: "请输入role_id",
            trigger: "blur",
          },
          {
            type: "number",
            min: 1,
            max: 5,
            messasge: "权限等级1~5,请输入role_id",
            trigger: "blur",
          },
        ],
        id: [
          { required: true, message: "请输入id", trigger: "blur" },
          {
            type: "number",
            min: 1,
            max: 100,
            messasge: "id取1~100之间",
            trigger: "blur",
          },
        ],
      },
      addDialogVisible: false,
      role_id: 0,
    };
  },
  created() {
    // console.log(this.tables);
    this.role_id = sessionStorage.getItem("role_id");
    this.getManagerList();
  },
  computed: {
    tables() {
      const search = this.queryInfo.query;
      if (search) {
        // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
        // 注意： filter() 不会对空数组进行检测。
        // 注意： filter() 不会改变原始数组。
        return this.managerList.filter((data) => {
          // some() 方法用于检测数组中的元素是否满足指定条件;
          // some() 方法会依次执行数组的每个元素：
          // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
          // 如果没有满足条件的元素，则返回false。
          // 注意： some() 不会对空数组进行检测。
          // 注意： some() 不会改变原始数组。
          return Object.keys(data).some((key) => {
            // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
            // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
            return String(data[key]).toLowerCase().indexOf(search) > -1;
          });
        });
      }
      return this.managerList.slice(
        (this.queryInfo.pagenum - 1) * this.queryInfo.pagesize,
        this.queryInfo.pagenum * this.queryInfo.pagesize
      );
    },
  },
  methods: {
    async getManagerList() {
      let self = this;
      let res = await self.$get("/admin");
      console.log(res);
      self.managerList = res.result.info;
      self.total = res.result.info.length;
    },
    //监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      console.log(newSize);
      this.queryInfo.pagesize = newSize;
      this.getManagerList();
    },
    //监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage);
      this.queryInfo.pagenum = newPage;
      this.getManagerList();
    },
    // 搜索功能
    searchInfo() {
      this.getManagerList();
    },
    // 根据id删除对应用户信息
    async removeUserById(id) {
      console.log(id);
      let self = this;
      let role_id = sessionStorage.getItem("role_id");
      if (role_id !== "1") return self.$message.error("您没有权限删除管理员");
      if (id === 1) {
        return self.$message.error("超级管理员不能删除超级管理员");
      }
      // 先弹框询问用户是否删除数据
      const confirmResult = await self
        .$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .catch((err) => err);
      // 如果用户确认删除则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串 cancel
      // console.log(confirmResult);
      if (confirmResult !== "confirm") {
        return self.$message.info("已经取消删除");
      }

      // console.log("确认了删除");
      const res = await self.$Delete(`/admin/${id}`);
      if (res.code !== 1) {
        return self.$message.error("删除管理员失败！");
      }

      self.$message.success("删除管理员成功！");
      this.getManagerList();
    },
    // 添加管理员权限
    addUserById(id) {
      console.log(id);
    },

    // 展示添加管理员对话框
    addManagerDialog() {
      if (isSuperManager()) {
        this.addDialogVisible = false;
      } else {
        this.addDialogVisible = true;
      }
    },
    // 点击按钮，添加新用户
    addUser() {
      let self = this;
      self.$refs.addFormRef.validate(async (valid) => {
        // console.log(valid);
        if (!valid) return;
        // 可以发起添加用户的网络请求
        const res = await self.$get("/admin/create", self.addForm);
        console.log(res);
        if (res.code !== 1) {
          return self.$message.error("添加管理员失败！");
        }

        self.$message.success("添加管理员成功！");
        // 隐藏添加用户的对话框
        self.addDialogVisible = false;
        // 重新获取用户列表数据
        self.getManagerList();
      });
    },
    // 监听添加用户对话框的关闭事件
    addDialogClosed() {
      this.$refs.addFormRef.resetFields();
    },

    // 监听修改权限对话框关闭事件
    addPowerDialogClosed() {
      this.$refs.addPowerFormRef.resetFields();
    },

    // 添加管理员权限展示对话框
    addManagerById(id) {
      console.log(typeof id);
      let self = this;
      isSuperManager();
      self.addPowerForm =
        self.managerList[self.managerList.findIndex((res) => res.id === id)];
      self.addPowerDialogVisible = true;
      console.log(typeof self.addPowerForm.role_id);
    },
    // 确认添加
    addPower() {
      let self = this;
      self.$refs.addPowerFormRef.validate(async (valid) => {
        if (!valid) return;
        const res = await self.$get("/admin/updateRole", {
          id: self.addPowerForm.id,
          role_id: self.addPowerForm.role_id,
        });
        console.log(res);
        if (res.code !== 1) {
          return self.$message.error("修改管理员权限失败！");
        }
        self.$message.success("修改管理员权限成功！");
        self.getManagerList();
        self.addPowerDialogVisible = false;
      });
    },
  },
};
</script>
<style lang="scss">
.search-for {
  width: 30%;
}
.search-for-ipt {
  width: 200px;
  margin-right: 10px;
}
</style>